﻿@model Amba.NoteList.ViewModel.NoteListEditorViewModel
@{
    Script.Include("angular_last.min.js").AtHead();
    Script.Include("angular-ui.min.js").AtHead();
    Script.Include("AmbaSortableList.js").AtHead();
    Script.Include("NoteListDashboard.js").AtHead();    
    Style.Include("dashboard.css").AtHead();

    Script.Require("jQueryUI_Sortable").AtHead();
    var pickerId = Guid.NewGuid().ToString("N").Substring(0, 6);
    var siteRoot = VirtualPathUtility.ToAbsolute("~/").TrimEnd('/');

}
<fieldset>
    <label>@Model.Field.DisplayName</label>
    <div id="app_@(pickerId)">
        <div data-ng-controller="NoteListDashboardCtrl">                    
            <input name="@Html.NameFor(x => x.Data)" type="hidden" value="{{data|json}}"/>              
                <ul data-amba-sortable-list="{opacity: 0.5}" data-ng-model="data" class="table image-list">
                    <li class="table-row image-item" data-ng-repeat="image in data" >                        
                        <div class="table-cell image-fields">                            
                            @foreach (var customField in Model.Settings.CustomFieldsList)
                            {
                                if (!string.IsNullOrWhiteSpace(customField.DisplayName))
                                {
                                    <span class="display-name">@(customField.DisplayName)</span>
                                }
                                switch (customField.Type)
                                {
                                    case "textarea":
                                        <textarea class="desc-textarea" data-ng-model="image.@(customField.Name)" rows="1"></textarea>
                                        break;
                                    case "text":
                                        <input class="descr-text" type="text" data-ng-model="image.@(customField.Name)"/>
                                        break;
                                }
                            }
                        </div>
                        <div class="table-cell image-buttons">
                            <a href="" ng-click="deleteImage(image.file)">@T("Delete")</a>
                        </div>
                    </li>                   
                    <li data-ng-show="data.length==0 && uploads.length==0" class="empty-list table-row">
                        <div class="upload-message table-cell">@T("Drop file here to upload")</div>
                    </li>                
                </ul>
            <div class="buttons" style="margin-top: 10px;">
                <a href="" class="button" ng-click="data.push({})">@T("Add Record")</a>
            </div>
        </div>
    </div>
</fieldset>

@using (Script.Foot())
{
    <script type="text/javascript">
        angular.module('app_@(pickerId)', ['NoteListDashboard', 'AmbaSortableList', 'ui'])
            .value('data', @Html.Raw(Model.Data))
            .value('options', {
                id: '@(pickerId)'
            });
            
        angular.bootstrap($('#app_@(pickerId)'), ['app_@(pickerId)']);       
    </script>
}